<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <!--
        内部样式通过style标签来实现,可以为多个元素设置统一样式
        style标签处于head标签体中
        通过style标签为当前页面中某些元素设置统一的样式
        在style标签体中通过选择器语法匹配某些元素
        选择器{样式名:样式值;样式名:样式值;...}
    -->
    <style>
        p{
            color:green;
            font-size:20px;
        }
        div{
            color:green!important;
        }
    </style>
    <!--
        可以引入外部的样式,引入进来的样式可以对当前页面中的元素生效
        有两种引入方式
        1.通过link标签引入,该标签属于head标签的子标签
        href:指定外部引入的css文件的地址
    -->
<!--    <link rel="stylesheet" href="test.css">-->
    <!--
        2.通过@import引入,该方式必须处于style标签体中
        对应外部引入的样式,相当于是内部样式
        在对应引入的位置将外部样式的内容拷贝了过来
    -->
    <style>
        /*@import "test.css";*/
        span{
            color:blue;
            font-size: 18px;
        }
    </style>
    <style>
        span{
            color:red;
        }
    </style>
</head>
<body>
<!--
    行内式通过style属性来实现,只能为某一个元素设置指定的样式
    style:为当前元素设置指定的css样式
    color:设置文本颜色
    font-size:设置文本字体的大小,浏览器默认大小为:16px
-->
<!--
    关于不同引入方式的优先级
    行内式的优先级最高
    内部样式与外部样式优先级一致,没有区别
    谁配置在后,谁生效。后面的样式会覆盖前面的样式
    可以在样式值后面加上!important表示破坏优先级
    带有!important的样式是优先生效的
-->
<div style="color:red!important;font-size: 12px;">这是一个div,使用行内式设置样式</div>
<p>第1个段落</p>
<p>第2个段落</p>
<p>第3个段落</p>
<p>第4个段落</p>
<p>第5个段落</p>
<span>第1个span</span><br>
<span>第2个span</span><br>
<span>第3个span</span><br>
<span>第4个span</span><br>
<span>第5个span</span><br>
</body>
</html>